<template>
	<el-aside class="lx-side">
		<div class="web-logo">
			<img src="../assets/img/logo.jpg" class="pic-logo" />
			<div class="text-logo">教发系统</div>
		</div>
		<el-menu :default-active="defaultActive" background-color="#2B324E" text-color="#FFFFFF" active-text-color="#FFFFFF" unique-opened>
			<template v-for="(menu,i) in leftMenuList">
				<template v-if="isShowChild(menu)">
					<el-submenu :index="i+''" v-if="menu.name && menu.name != 'Login' ">
						<template slot="title">
							<i class="iconfont" :class="menu.meta.icon"></i>
							<span>{{menu.meta.title}}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item v-if="subMenu.meta.isShow" :index="i+'-'+j" v-for="(subMenu,j) in menu.children" @click="menuClick(subMenu)">
								{{subMenu.meta.title}}
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</template>
				<template v-else-if="menu.name && menu.name != 'Login'">
					<el-menu-item :index="i+''" @click="menuClick(menu)">
						<i class="iconfont" :class="menu.meta.icon"></i>
						<span slot="title">{{menu.meta.title}}</span>						
					</el-menu-item>
				</template>
			</template>

		</el-menu>

	</el-aside>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		created() {
			console.log(this.leftMenuList)
			if (!this.$route.name) {
				if(this.$route.fullPath != "/"){
					//正常刷新
					this.$router.push({path:this.$route.fullPath})
				}else{
					//
					let r =  this.$router.options.routes[0];
					let newToName = r.children?r.children[0].name:r.name;
					this.$router.push({name:newToName})
				}
			}
		},
		data() {
			return {
			}
		},
		computed: {
			leftMenuList() {
				return this.$router.options.routes;
			},
			defaultActive(){
				let nowRoute = this.$route;
				let name = nowRoute.name;
				let da = "0";
				if(name){
					let routes = this.$router.options.routes;
					let fatherName = nowRoute.meta.fatherName;
					for(let i = 0 ; i < routes.length ; i++){
						let r = routes[i];
						if(r.name == fatherName){
							if(nowRoute.meta.title){
								let rc = r.children
								for(let j = 0 ; j < rc.length ; j++){
									if(rc[j].name == name){
										da = i + "-" + j;
										break;
									}
								}
							}else{
								da = i + "";
								break;
							}
						}
						
					}
				}
				console.log(da)
				return da;
			}
		},
		methods: {
			isShowChild(menu) {
				if (!menu.children) {
					return false;
				}
				let totalShow = 0;
				for (let i = 0; i < menu.children.length; i++) {
					let childMenu = menu.children[i];
					if (childMenu.meta.isShow) {
						++totalShow;
					}
					if (totalShow > 1) {
						return true;
					}
				}
				return false;
			},
			menuClick(menu) {
				let toName = menu.children ? menu.children[0].name : menu.name;
				// console.log(menu);
				if (menu.meta.query) {
					this.$router.push({
						name: toName,
						query: menu.meta.query
					});
				} else {
					this.$router.push({
						name: toName
					});
				}

				// console.log(this.$route);
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lx-side {
		width: auto !important;

		.web-logo {
			width: 228px;
			height: 144px;
			background: #2B324E;
			box-shadow: -1px 1px 12px rgba(255, 255, 255, 0.06);
			box-sizing: border-box;
			@include flex-column (center, center);

			.pic-logo {
				width: 56px;
				height: 56px;
				border-radius: 8px;
			}

			.text-logo {
				font-size: 18px;
				font-weight: bolder;
				color: #FFFFFF;
				margin-top: 12px;
			}
			position: relative;
			z-index: 2;
		}
	}

	.el-menu {
		width: 228px;
		height: calc(100% - 144px);
		overflow: auto;
		position: relative;
		z-index: 1;
	}

	.el-menu::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 0px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 0px;
	}

	.iconfont {
		color: #FFFFFF;
		margin-right: 16px;
	}

	.is-active {
		background-color: $mainColor !important;
		font-weight: bolder !important;
	}
</style>
